<script lang="ts" setup>
import ArticleCard from '@/views/common/article-card/index.vue';
import { viewMore } from '@/utils/constants';
import { onMounted, ref } from 'vue';
import { queryArticles } from '@/api/articles';
import { IArticleVo } from '@/api/dto/articles';
import { datetimeFormatter } from '@/utils/formatter';

const recommendArticles = ref<(IArticleVo)[]>();
onMounted(async () => {
  recommendArticles.value = (await queryArticles()).slice(0, 3).map(item => {
    return {
      ...item,
      date: datetimeFormatter(item.date),
    };
  });
});
// 控制查看更多按钮激活样式
const isActive = ref<boolean>(false);
</script>

<template>
  <div class="recommend-article">
    <div class="top">
      <div class="title">推荐文章</div>
      <div class="more" @mouseenter="isActive=true" @mouseleave="isActive=false" @click="viewMore">查看更多
        <div :class="['more-icon',isActive?'active':'default']"></div>
      </div>
    </div>
    <div class="article-wrapper">
      <article-card v-for="(item,index) in recommendArticles" :key="index" :title="item.title"
                    :author-name="item.author" :date="item.date" :url="item.link"
                    :page-views="item.read_counts"></article-card>
    </div>
  </div>
</template>

<style lang="less">
.recommend-article {
  width: 94%;
  display: inline-block;
  margin: 50px 0 0 3%;

  .top {
    display: flex;
    align-items: center;
    justify-content: space-between;

    .title {
      font-size: 24px;
      font-weight: 500;
      color: #042749;
      margin-bottom: 20px;
    }

    .more {
      cursor: pointer;
      font-size: 14px;
      font-weight: 400;
      color: #677C91;
      display: flex;
      align-items: center;

      &:hover {
        color: #096DD9;
      }

      .more-icon {
        width: 14px;
        height: 14px;
        background-size: 100%;
        background-repeat: no-repeat;

        &.default {
          background-image: url("@/assets/web/svgs/more.svg");
        }

        &.active {
          background-image: url("@/assets/web/svgs/more-active.svg");
        }
      }
    }
  }

  .article-wrapper {
    display: flex;
    justify-content: space-between;

    .article-card {
      //width: 390px;
      flex: 1;
      padding: 28px 20px;
      border-radius: 8px;
      margin-right: 30px;

      &:last-child {
        margin-right: 0;
      }

      .article-icon {
        width: 64px;
        height: 64px;
      }

      .article-desc {

        .headline {
          font-size: 16px;
        }

        .creator {
          font-size: 14px;
          font-weight: 400;
          margin-top: 22px;

          .divider-line {
            height: 12px;
            width: 1px;
            margin: 0 10px;
          }
        }
      }
    }
  }
}
</style>
